<!--  -->
<template>
  <div ref="argisMap" class='argisMap'></div>
</template>
  
  <script>
import { coordinates } from '@/utils/geometry'
export default {
  components: {},
  data() {
    return {
      map: null,
      view: null
    };
  },
  computed: {},
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
       // 确保 require 存在
       if (!window.require) {
        console.error('ArcGIS API not loaded');
        return;
      }
      let that = this
      window.require(['esri/Map', 'esri/views/MapView', 'esri/Basemap',
        'esri/layers/TileLayer', 'esri/layers/WebTileLayer', "esri/layers/WMSLayer", "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/geometryEngine",
        "esri/geometry/Polygon",
        "esri/Color"]
        , (Map, MapView, Basemap, TileLayer, WebTileLayer, WMSLayer,
          GraphicsLayer, Graphic, geometryEngine, Polygon, Color
        ) => {
          const map = new Map({
          })
          let webTileLayer = new WebTileLayer({
            id: '新疆地图边界遮罩',
            visible: true,
            urlTemplate: `https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&transparent=true&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=8c88eba266a165eac9c085724708f2f9`
          })
          map.add(webTileLayer)
          const view = new MapView({
            container: this.$refs.argisMap, // Reference to the view div created in step 5
            map: map, // Reference to the map object created before the view
            zoom: 6, // Sets zoom level based on level of detail (LOD)
            center: [85, 42.2], // Sets center point of view using longitude,latitude
            constraints: {
              maxZoom: 18, // 最小缩放级别
            },
          })
          //行政区划边界图层遮罩
          var graphicsLayer = new GraphicsLayer();
          var polygon = new Polygon({
            rings: coordinates
          });
          var outsidePolygon = geometryEngine.difference(new Polygon({
            rings: [[-180, 90], // 左上角
            [180, 90], // 右上角
            [180, -90], // 右下角
            [-180, -90], // 左下角
            [-180, 90] // 闭合
            ]
          }), polygon);
          var outsideGraphic = new Graphic({
            geometry: outsidePolygon,
            symbol: {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [0, 0, 0, 0.6],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255, 0.7],
                width: 1
              }
            }
          });
          graphicsLayer.add(outsideGraphic);
          var boundaryGraphic = new Graphic({
            geometry: polygon,
            symbol: {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [255, 255, 255, 0],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 0],
                width: 2
              }
            }
          });
          graphicsLayer.add(boundaryGraphic);
          map.add(graphicsLayer);


          that.map = map
          that.view = view
          view.ui.remove('zoom') //清除放大缩小按钮
          view.ui.remove('attribution') //清楚底部powered by ESRI
          view.on('click', function (event) {
            view.hitTest(event.screenPoint).then((responses) => {
              if (responses.results.length > 0) {
                that.$emit("viewClick", responses)
              }
            })
          })

          view.when(() => {
            console.log("地图已加载");
            that.$emit("viewLoaded", that.map, that.view)
          });
        })
    },
  },
}
  </script>
  <style lang='scss' scoped>
//@import url(); 引入公共css类
.argisMap {
  width: 100%;
  height: 100%;
}
</style>